<route>
{
  "meta":{
    "title":"模版设计"
  }
}
</route>
<template>
  <excelTemplateNav
    :title="this.$route.query.modelName"
    :downLoading="downLoading"
    :saveLoading="saveLoading"
    @downloadTemplate="downloadTemplate"
    @save="submit"
    @setting="handelGlobalConfig"
    ref="excelTemplateNav"
  >
    <div class="excelTemplateBox sz" v-loading="loading">
      <excelTemplateContainer
        v-model="info"
        :isCreate="isCreate"
        ref="excelTemplateContainer"
        v-if="info"
      />
    </div>
  </excelTemplateNav>
</template>

<script>
import excelTemplateNav from "./__components__/excelNav/index"
import excelTemplateContainer from "./__components__/excelContainer/index.vue"
import { beforeunload } from "@/utils/mixins"
import { downloadFileSrc } from "@/utils/util.js"
import { getBasePath } from "@/config/api.config"
import {
  putHmexceltemplateDesign,
  getHmexceltemplateInfoByModelCodeByKey,
} from "@/apis/paas/HmExcelTemplateController.js"
const defaultData = {
  notes: "",
  columns: [],
  duplicateCheckColumns: [],
}
export default {
  layout: "formlayout",
  components: { excelTemplateNav, excelTemplateContainer },
  mixins: [beforeunload],
  data() {
    return {
      info: null,
      downLoading: false,
      saveLoading: false,
      isCreate: true,
    }
  },
  created() {
    if (
      !this.$route.query ||
      !this.$route.query.key ||
      !this.$route.query.modelCode
    ) {
      this.$message.warning("当前页面参数有误，请重新打开设计页面")
    } else {
      this.getData()
    }
  },
  computed: {
    loading() {
      return !this.info
    },
  },
  methods: {
    async getData() {
      this.info = await getHmexceltemplateInfoByModelCodeByKey({
        modelCode: this.$route.query.modelCode,
        key: this.$route.query.key,
      })
      this.isCreate = !this.info.configJson
      try {
        this.info.configJson = this.info.configJson
          ? JSON.parse(this.info.configJson)
          : defaultData
      } catch (error) {
        console.error(error)
      }
    },
    submit() {
      if (this.$refs.excelTemplateContainer) {
        this.saveLoading = true
        return this.$refs.excelTemplateContainer
          .save()
          .then(async (data) => {
            // console.log(data)
            let url = await putHmexceltemplateDesign(data)
            this.$message.success("保存成功")
          })
          .finally(() => {
            this.saveLoading = false
          })
      } else {
        return Promise.reject()
      }
    },
    downloadTemplate() {
      if (this.$refs.excelTemplateContainer) {
        this.downLoading = true
        this.$refs.excelTemplateContainer
          .save()
          .then(async (data) => {
            let url = await putHmexceltemplateDesign(data)
            downloadFileSrc(
              getBasePath(`${url}?time=${new Date().getTime()}`),
              this.info.name || "模版"
            )
          })
          .finally(() => {
            this.downLoading = false
          })
      }
    },
    handelGlobalConfig() {
      this.$refs.excelTemplateContainer &&
        this.$refs.excelTemplateContainer.handelGlobalConfig()
    },
  },
}
</script>

<style lang="scss" scoped>
.excelTemplateBox {
  padding-top: 65px;
  height: 100%;
}
</style>
